<template>
  <div class="common-layout">
    <el-container>
      <!-- 左侧样式 -->
      <el-aside width="200px">

        <img src="../assets/loginBox.svg">
        <p class="imgtext">
          欢迎进入影客后台管理系统
        </p>
      </el-aside>
      <!-- 右侧样式 -->
      <el-main>
        <div class="formtitle">欢迎登录</div>
        <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" :rules>
          <el-form-item label="账号" prop="loginAct">
            <el-input v-model="ruleForm.loginAct" />
          </el-form-item>
          <el-form-item label="密码" prop="loginPwd">
            <el-input type="password" v-model="ruleForm.loginPwd" />
          </el-form-item>
          <el-form-item>
            <el-button class="loginbtn" type="primary" @click=loginFun(ruleForm)>登录</el-button>
          </el-form-item>
          <el-form-item label="" prop="remeberMe">
              <el-checkbox label="记住我" name="remeberMe" v-model="ruleForm.remeberMe" />
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>

import { defineComponent } from 'vue';
import Request from '../http/Request';
import utils from '../utils/utils';

export default defineComponent({
  name: 'LoginView',
  components: {
  },
  setup() {
    return {
    }
  },
  data() {
    return {
      ruleForm: {
        loginAct: '',
        loginPwd: '',
        remeberMe: undefined
      },
      rules: {
        loginAct: [
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        loginPwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '密码长度在6到16个字符之间', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    loginFun(ruleForm) {
      this.$refs.ruleFormRef.validate((isValid) => {
        if (isValid) {
          Request.doPost('/api/login', ruleForm).then((res) => {
            if (res.code == 200) {
                //  window.location.href = '/dashboard'
              utils.removeToken();
              if (this.ruleForm.remeberMe==true) {
                localStorage.setItem('dlyk_token', res.data)
              } else {
                sessionStorage.setItem('dlyk_token', res.data)
              }
              this.$message.success('登录成功')
              this.$router.push('/dashboard')
            } else {
              this.$message.error('账号或密码错误')
            }
          })
      }
    })

    },
    freeLogin() {
      let token=localStorage.getItem('dlyk_token')
      if (token) {
        Request.doGet('/api/login/free').then((res) => {
          if (res.code == 200) {
            this.$message.success('登录成功')
            this.$router.push('/dashboard')
          } else {
            this.$message.error('账号或密码错误')
          }
        })
      }
    }
  },
  mounted() {
    this.freeLogin()
  }
})
</script>

<style scoped>
.el-aside {
  background-color: #1a1a1a;
  width: 40%;
  text-align: center;
}

.el-main {
  height: calc(100vh);
  width: 60%;
}

img {

  height: 380px;
  text-align: center;
}

.imgtext {
  color: #fff;
  font-size: 20px;
  text-align: center;
  margin-top: 20px;
  text-align: center;
}

.imgtext {
  color: #fff;
  font-size: 28px;
  text-align: center;
  margin-top: 20px;
}

.el-form {

  width: 60%;
  margin: 0 auto;
}

.formtitle {
  text-align: center;
  font-size: 24px;
  margin-top: 100px;
  margin-bottom: 20px;
}

.loginbtn {
  width: 100%;
  text-align: center;
}
</style>
